.page-show-opacity {
  --timer: .5s;
  transition: all ease-in-out var(--timer);
  animation: page-show-opacity ease-in-out var(--timer);
  opacity: 1;
}

@keyframes page-show-opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.page-show-left {
  --timer: .5s;
  --transformX: 120%;
  transition: all ease-in-out var(--timer);
  animation: page-show-left ease-in-out var(--timer);
  transform: translateX(0);
}

@keyframes page-show-left {
  from {
    transform: translateX(var(--transformX));
  }

  to {
    transform: translateX(0);
  }
}

.page-show-right {
  --timer: .5s;
  --transformX: -120%;
  transition: all ease-in-out var(--timer);
  animation: page-show-right ease-in-out var(--timer);
  transform: translateX(0);
}

@keyframes page-show-right {
  from {
    transform: translateX(var(--transformX));
  }

  to {
    transform: translateX(0);
  }
}

.page-hide-left {
  --timer: .5s;
  --transformX: -120%;
  transition: all ease-in-out var(--timer);
  animation: page-hide-left ease-in-out var(--timer);
  transform: translateX(var(--transformX));
}

@keyframes page-hide-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--transformX));
  }
}

.page-hide-right {
  --timer: .5s;
  --transformX: 120%;
  transition: all ease-in-out var(--timer);
  animation: page-hide-right ease-in-out var(--timer);
  transform: translateX(var(--transformX));
}

@keyframes page-hide-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--transformX));
  }
}

.turnAround {
  animation: turnAround 30s linear infinite;
}

@keyframes turnAround {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(1turn);
  }
}


.scrollShow-to-bottom {
  transition: all 1s linear;
  /* animation: scrollShowToVottom 15s linear infinite; */
}

@keyframes scrollShowToVottom {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.custom-ant-tabs .ant-tabs-nav {
  height: 100%;
}


.toTop-icon:hover {
  animation: tremble 3s linear infinite;
  transform-origin: bottom center;
}

@keyframes tremble {
  0% {
    transform: translateX(0) translateY(0) rotateY(0deg);
  }

  25% {
    transform: translateX(-2%) translateY(0) rotateY(15deg);

  }

  75% {
    transform: translateX(2%) translateY(0) rotateY(-15deg);
  }

  100% {
    transform: translateX(0) translateY(0) rotateY(0deg);
  }
}